<template>
  <view class="shop-card">
    <van-checkbox v-model="dataObj.isChecked" @change="handleChange(dataObj.id)"/>
    <image
      class="card-img"
      :src="dataObj.model.img"
      round
      @click="gotoDetail(dataObj.wares.id)"
    />
    <view class="card-info">
      <view class="info-title van-ellipsis">{{ dataObj.wares.name }}</view>
      <view
        class="info-option"
        @click="openSku(dataObj)"
      >
        <view class="van-ellipsis">
          {{ specifications }}
        </view>
        <view>
          <van-icon
            name="arrow-down"
            v-if="!showSku"
          />
          <van-icon
            name="arrow-up"
            v-if="showSku"
          />
        </view>
      </view>
      <view class="info-option2">
        <view class="option-price">
          <span>￥</span>{{ dataObj.model.price }}
        </view>
        <view class="option-num">
          <van-stepper
            :value="dataObj.count"
			integer
            @change="onChange"
			:max=" !dataObj.model.buyLimit||dataObj.model.stock<dataObj.model.buyLimit? dataObj.model.stock : dataObj.model.buyLimit"
          />
        </view>
      </view>
    </view>
    <sku
      :show="showSku"
	  ref="sku"
	  @close="closePopup"
	  @hanldeUpdataCar="hanldeUpdataCar"
	  :isFromCar=true
      :dateObj="dataObj"
    />
  </view>
</template>

<script>
 import Sku from "./sku.vue";
export default {
  props: {
    dataObj: {
      type: Object,
	  default: function () {
	          return {}
	        }
    },
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showSku: false,
      specifications: "",
      time: null,
    };
  },
  components: {
    Sku,
  },
  methods: {
	  gotoDetail(id){
		  uni.navigateTo({
		  	url:`../detail/detail?id=${id}`
		  })
	  },
	  hanldeUpdataCar(data){
	  	this.$emit("hanldeUpdataCar",data)
		this.showSku = false;
		uni.showTabBar();
	  },
	  handleChange(id){
		  this.$emit("update",id)
	  },
	  closePopup(){
		  this.showSku=false,
		  uni.showTabBar();
	  },
    //打开sku
    openSku() {
      this.showSku = true;
	  uni.hideTabBar();
	  this.$refs.sku.init(this.dataObj.wares.id);
    },
    onChange(e) {
		if(e.detail>=this.dataObj.model.buyLimit&&this.dataObj.model.buyLimit!=0){
						uni.showToast({
							icon:"none",
							title:"已达到用户最大购买数量！",
							duration:1000
						});
			this.$emit("updateNumber",this.dataObj.model.buyLimit,this.dataObj.id);
			return false;
		}
		if(e.detail>=this.dataObj.model.stock){
			uni.showToast({
				icon:"none",
				title:"数量已到达库存上限！",
				duration:1000
			})
			setTimeout(()=>{this.$emit("updateNumber",this.dataObj.model.stock,this.dataObj.id);},1000);
			return false;
		}
		 this.$emit("updateNumber",e.detail,this.dataObj.id);	
    },

  },
  mounted() {
    this.specifications = this.dataObj.model.specificationsValue.replace(
      /"|{|}/g,
      ""
    );
  },
  watch: {
    dataObj: {
      handler(newValue, oldValue) {
        if (typeof newValue.model.specificationsValue=="string") {
          this.specifications = newValue.model.specificationsValue.replace(
            /"|{|}/g,
            ""
          );
        }
      },
      deep: true,
    },
  },
};
</script>

<style lang='scss' scoped>
.shop-card {
  width: 100%;
  background: #fff;
  margin-top: 4vw;
  border-radius: 3.5vw;
  padding: 4vw;
  box-shadow: 0px 1px 24px 0px rgba(79, 92, 117, 0.04);
  display: flex;
  align-items: center;
  .card-img {
    height: 24vw;
    width: 24vw;
    border-radius: 3.5vw;
    margin-left: 3vw;
  }
  .card-info {
    height: 100%;
    width: 48vw;
    margin-left: 3vw;
    .info-title {
      color: #333333;
      font-size: 4vw;
      font-weight: bold;
    }
    .info-option {
      margin-top: 2vw;
      max-width: 50vw;
      height: 8vw;
      display: flex;
      align-items: center;
      color: #999;
      font-size: 3.5vw;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      view:first-child {
        background: #f9f9f9;
        height: 8vh;
        line-height: 8vh;
        padding: 0 0 0 2vw;
      }
      view:last-child {
        background: #f9f9f9;
        height: 8vh;
        line-height: 8vh;
        padding: 0 2vw 0 0;
      }
    }
    .info-option2 {
      margin-top: 2.6vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      .option-price {
        color: #cc363c;
        font-size: 5vw;
        font-weight: bold;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        span {
          font-size: 3vw;
        }
      }
      .option-num {
        .van-stepper--round .van-stepper__minus {
          color: #222;
          background-color: #fff;
          border: none;
          width: 5vw;
          height: 5vw;
        }
        .shop-card
          .card-info
          .info-option2
          .option-num
          .van-stepper--round
          .van-stepper__minus {
          color: #222222;
          background-color: #fff;
          border: none;
        }
        .van-stepper--round .van-stepper__plus {
          color: #222222;
          background-color: #fff;
          width: 5vw;
          height: 5vw;
        }
      }
    }
  }
}
</style>